<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: easyui-header('菜单列表')" />
	<th:block th:include="include :: ztree-css" />
	<style type="text/css">
		.datagrid-htable .dg_datagrid-cell-c2-menuName {
			text-align: center !important;
		}
		.datagrid-htable .dg_datagrid-cell-c2-url {
			text-align: center !important;
		}
	</style>
</head>
<body class="white-bg">
    <div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-head">
				<div class="easyui-panel">
					<form id="menu-form">
						<div class="select-list">
							<ul>
								<li>
									<label>菜单名称：</label>
									<input id="s_menuName" type="text" name="menuName" class="easyui-textbox" data-options="prompt:'请输入菜单名称'"/>
								</li>
								<li>
									<label>菜单状态：</label>
									<select id="s_visible" name="visible" class="easyui-combobox" th:with="type=${@dict.getType('sys_show_hide')}">
										<option value=" ">所有</option>
										<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
									</select>
								</li>
								<li>
									<a class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="searchMenu()" >查询</a>
									<a class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="resetMenuForm()" >重置</a>
								</li>
							</ul>
						</div>
					</form>
				</div>
			</div>
            <div class="col-sm-12 search-body">
			     <div id="toolbar" role="group">
		            <a class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addMenu()" shiro:hasPermission="system:menu:add">新增</a>
		            <a class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="editMenu()" shiro:hasPermission="system:menu:edit">修改</a>
		            <a class="easyui-linkbutton" data-options="iconCls:'icon-redo'" onclick="expandAllMenu()">展开</a>
		            <a class="easyui-linkbutton" data-options="iconCls:'icon-undo'" onclick="collapseAllMenu()">折叠</a>
		            <a class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="reloadAllMenu()">刷新</a>
		        </div>
			    <table id="dg" class="easyui-datagrid" toolbar="#toolbar"></table>
			</div>
	    </div>
	</div>
	<th:block th:include="include :: easyui-footer" />
	<th:block th:include="include :: ztree-js" />
 	<script th:inline="javascript">
	 	var addFlag = [[${@permission.hasPermi('system:menu:add')}]];
		var editFlag = [[${@permission.hasPermi('system:menu:edit')}]];
		var removeFlag = [[${@permission.hasPermi('system:menu:remove')}]];
		var datas = [[${@dict.getType('sys_show_hide')}]];
    </script>
	<script th:inline="none">
		var prefix = ctx + "system/menu";
		$(function() {
			$('#dg').treegrid({
				url: prefix + "/list",
				idField : 'menuId',
				treeField : 'menuName',
				striped: true,
				fit : true,
				fitColumns : true,
				animate: false,
				rownumbers:true,
				columns : [[ 
					{
						title : '菜单ID',
						field : 'menuId',
						hidden : true,
						width: 20
					}, {
					    title: '菜单名称',
					    field: 'menuName',
					    align: "left",
					    width: 120
					},  
					{
					    field: 'icon',
					    title: '图标',
					    align: "center",
					    width: 50,
					    formatter: function(value, row, index) {
					        if ($.common.isNotEmpty(row.icon)) {
					        	 return '<i class="' + row.icon + '"></i>';
					        } else {
					        	return '';
					        }
					    }
					},
					{
					    field: 'orderNum',
					    title: '排序',
					    align: "center",
					    width: 50
					},
					{
			            field: 'url',
			            title: '请求地址',
			            width: 120,
			            align: "left"
			        },
			        {
			            title: '类型',
			            field: 'menuType',
			            width: 60,
			            align: "center",
			            formatter: function(value, item, index) {
			                if (item.menuType == 'M') {
			                    return '<span class="label label-success">目录</span>';
			                }
			                else if (item.menuType == 'C') {
			                    return '<span class="label label-primary">菜单</span>';
			                }
			                else if (item.menuType == 'F') {
			                    return '<span class="label label-warning">按钮</span>';
			                }
			            }
			        },
			        {
			            field: 'visible',
			            title: '可见',
			            width: 60,
			            align: "center",
			            formatter: function(value, row, index) {
			            	if (row.menuType == 'F') {
			                    return '-';
			                }
			            	return $.table.selectDictLabel(datas, row.visible);
			            }
			        },
			        {
			            field: 'perms',
			            title: '权限标识',
			            width: 90,
			            align: "center"
			        },
			        {
			        	field: 'action',
			            title: '操作',
			            width: 100,
			            align: "center",
			            formatter: function(value, row, index) {
			                var actions = [];
			                actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="editMenu(\'' + row.menuId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
			                actions.push('<a class="btn btn-info btn-xs ' + addFlag + '" href="javascript:void(0)" onclick="addMenu(\'' + row.menuId + '\')"><i class="fa fa-plus"></i>新增</a> ');
			                actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="removeMenu(\'' + row.menuId + '\')"><i class="fa fa-trash"></i>删除</a>');
			                return actions.join('');
			            }
			        }
           		]],
           		onLoadSuccess: function(row, data) {
           	    	$.each(data, function(i, val) {
           	    		$("#dg").treegrid("collapseAll", data[i].menuId);
           	    	});
           	    }
			});
		});
		//查询
		function searchMenu(){
			var params = $.common.formToJSON("menu-form");
			$("#dg").treegrid('load', params).treegrid('uncheckAll').treegrid('unselectAll').treegrid('clearSelections');
		}
		//重置
		function resetMenuForm(){
			$("#s_menuName").textbox("setValue", "");
			$("#s_visible").combobox("setValue", " ");
			var params = $.common.formToJSON("menu-form");
			$("#dg").treegrid('load', params).treegrid('uncheckAll').treegrid('unselectAll').treegrid('clearSelections');
		}
		//展开
		function expandAllMenu(){
			var node = $('#dg').treegrid('getSelected');
			if (node) {
				$('#dg').treegrid('expandAll', node.menuId);
			} else {
				$('#dg').treegrid('expandAll');
			}
		}
		//折叠
		function collapseAllMenu(){
			var node = $('#dg').treegrid('getSelected');
			if (node) {
				$('#dg').treegrid('collapseAll', node.menuId);
			} else {
				$('#dg').treegrid('collapseAll');
			}
		}
		//刷新
		function reloadAllMenu(){
			$('#dg').treegrid('reload');
		}
		//删除
		function removeMenu(id){
			 $.messager.confirm("确认", "确定要删除该条数据吗？", function (isDelete) {
 	        	if (isDelete) {
 	        		var config = {
	        	        url: prefix + "/remove/" + id,
	        	        type: "get",
	        	        dataType: "json",
	        	        data: "",
	        	        beforeSend: function () {
	        	        	$.modal.loading("正在处理中，请稍后...");
	        	        },
	        	        success: function(result) {
	        	        	if (result.code == web_status.SUCCESS) {
	                        	$.messager.show({
	        						title : '提示',
	        						msg : result.msg,
	        						timeout: 1000
	        					});
	                        	var params = $.common.formToJSON("menu-form");
	                           	$('#dg').treegrid('load', params).treegrid('uncheckAll').treegrid('unselectAll').treegrid('clearSelections');
	                        } else if (result.code == web_status.WARNING) {
	                            $.messager.alert("提示", result.msg, 'warning');
	                        }  else {
	                        	$.messager.alert("提示", result.msg, 'error');
	                        }
	                    	$.modal.closeLoading();
	        	        }
	        	    };
	        	    $.ajax(config);
 	        	}
 	        });
		}
		//新增菜单
		function addMenu(menuId){
			var url = "";
			if($.common.isEmpty(menuId)){
				url = prefix + "/add/0";
			} else {
				url = prefix + "/add/"+menuId;
			}
		 	// 皮肤缓存
	    	var skin = storage.get("skin");
	    	var panelWindowTheme = "";
        	var panelWindowHeaderTheme = "";
        	var panelWindowBodyTheme = "";
	    	// 本地主题优先，未设置取系统配置
	    	if($.common.isNotEmpty(skin)){
	    		panelWindowTheme = "easyui-window-" + skin.split('|')[0];
	    		panelWindowHeaderTheme = "easyui-window-header-" + skin.split('|')[0];
	    		panelWindowBodyTheme = "easyui-window-body-" + skin.split('|')[0];
	    	}
	    	var dialogObj = $('<div id="addMenuDialog" style="overflow-x:hidden;"/>');
	    	dialogObj.dialog({
	    		href: url,
				iconCls: "icon-add",
				width : 850,
				height : ($(window).height() - 50),
				modal : true,
				maximizable: true,
				title : "新增菜单",
				buttons : [ {
					text : '提交',
					iconCls : 'icon-save',
					handler : function() {
						if($("#form-menu-add").form('validate')){
							var objDoc = $(".window .dialog-button").find("a")[0];
							$(objDoc).linkbutton("disable");//禁用保存按钮
							var config = {
			        	        url: prefix + "/add",
			        	        type: "post",
			        	        dataType: "json",
			        	        data: $("#form-menu-add").serialize(),
			        	        beforeSend: function () {
			        	        	$.modal.loading("正在处理中，请稍后...");
			        	        },
			        	        success: function(result) {
			        	        	if (result.code == web_status.SUCCESS) {
			                           	dialogObj.dialog('destroy');
			                        	$.messager.show({
			        						title : '提示',
			        						msg : result.msg,
			        						timeout: 1000
			        					});
			                        	var params = $.common.formToJSON("menu-form");
			                           	$('#dg').treegrid('load', params).treegrid('uncheckAll').treegrid('unselectAll').treegrid('clearSelections');
			                        } else if (result.code == web_status.WARNING) {
			                            $.messager.alert("提示", result.msg, 'warning');
			                            var objDoc = $(".window .dialog-button").find("a")[0];
										$(objDoc).linkbutton("enable");//启用保存按钮
			                        }  else {
			                        	$.messager.alert("提示", result.msg, 'error');
			                        	var objDoc = $(".window .dialog-button").find("a")[0];
										$(objDoc).linkbutton("enable");//启用保存按钮
			                        }
			                    	$.modal.closeLoading();
			        	        }
			        	    };
			        	    $.ajax(config);
						}
					}
				},{
					text : '关闭',
					iconCls : 'icon-cancel',
					handler : function() {
						dialogObj.dialog('destroy');
					}
				} ],
				onOpen : function(){
					$("#addMenuDialog").parents(".window").addClass(panelWindowTheme);
					$("#addMenuDialog").addClass(panelWindowBodyTheme);
					$("#addMenuDialog").siblings(".window-header").find(".panel-title").addClass(panelWindowHeaderTheme);
				},
				onClose : function() {
					dialogObj.dialog('destroy');
				}
			});
		}
		
		//修改菜单
		function editMenu(menuId){
			var url = "";
			if($.common.isEmpty(menuId)){
				var selectionRows = $("#dg").treegrid('getSelections');
				if(selectionRows.length == 0){
	    			$.messager.alert("提示", "请选择一条记录！", 'warning');
	    			return false;
	    		}
				var row = selectionRows[0];
				url = prefix + "/edit/"+row.menuId;
			} else {
				url = prefix + "/edit/"+menuId;
			}
		 	// 皮肤缓存
	    	var skin = storage.get("skin");
	    	var panelWindowTheme = "";
        	var panelWindowHeaderTheme = "";
        	var panelWindowBodyTheme = "";
	    	// 本地主题优先，未设置取系统配置
	    	if($.common.isNotEmpty(skin)){
	    		panelWindowTheme = "easyui-window-" + skin.split('|')[0];
	    		panelWindowHeaderTheme = "easyui-window-header-" + skin.split('|')[0];
	    		panelWindowBodyTheme = "easyui-window-body-" + skin.split('|')[0];
	    	}
	    	var dialogObj = $('<div id="editMenuDialog" style="overflow-x:hidden;"/>');
	    	dialogObj.dialog({
	    		href: url,
				iconCls: "icon-edit",
				width : 850,
				height : ($(window).height() - 50),
				modal : true,
				maximizable: true,
				title : "修改菜单",
				buttons : [ {
					text : '提交',
					iconCls : 'icon-save',
					handler : function() {
						if($("#form-menu-edit").form('validate')){
							var objDoc = $(".window .dialog-button").find("a")[0];
							$(objDoc).linkbutton("disable");//禁用保存按钮
							var config = {
			        	        url: prefix + "/edit",
			        	        type: "post",
			        	        dataType: "json",
			        	        data: $("#form-menu-edit").serialize(),
			        	        beforeSend: function () {
			        	        	$.modal.loading("正在处理中，请稍后...");
			        	        },
			        	        success: function(result) {
			        	        	if (result.code == web_status.SUCCESS) {
			                           	dialogObj.dialog('destroy');
			                        	$.messager.show({
			        						title : '提示',
			        						msg : result.msg,
			        						timeout: 1000
			        					});
			                        	var params = $.common.formToJSON("menu-form");
			                           	$('#dg').treegrid('load', params).treegrid('uncheckAll').treegrid('unselectAll').treegrid('clearSelections');
			                        } else if (result.code == web_status.WARNING) {
			                            $.messager.alert("提示", result.msg, 'warning');
			                            var objDoc = $(".window .dialog-button").find("a")[0];
										$(objDoc).linkbutton("enable");//启用保存按钮
			                        }  else {
			                        	$.messager.alert("提示", result.msg, 'error');
			                        	var objDoc = $(".window .dialog-button").find("a")[0];
										$(objDoc).linkbutton("enable");//启用保存按钮
			                        }
			                    	$.modal.closeLoading();
			        	        }
			        	    };
			        	    $.ajax(config);
						}
					}
				},{
					text : '关闭',
					iconCls : 'icon-cancel',
					handler : function() {
						dialogObj.dialog('destroy');
					}
				} ],
				onOpen : function(){
					$("#editMenuDialog").parents(".window").addClass(panelWindowTheme);
					$("#editMenuDialog").addClass(panelWindowBodyTheme);
					$("#editMenuDialog").siblings(".window-header").find(".panel-title").addClass(panelWindowHeaderTheme);
				},
				onClose : function() {
					dialogObj.dialog('destroy');
				}
			});
		}
	</script>
</body>
</html>